<!--
 * @Author: jiu yin
 * @Date: 2024-04-09 10:05:00
 * @LastEditTime: 2024-04-30 15:41:06
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\ar_navigation\index.vue
 * jiu
-->
<template>

	<view class="content bg-#F6F9F8 h-100vh">
		<firstShow ref="firstShow" :is_read="is_read"></firstShow>

		<text></text>
		<!-- 头 -->
		<custom_navbar :title="map_nav_type_computed == 'ar_nav' ? 'AR导航' : '地图导览'" :theme="theme"
			@getNavHeight="getNavHeight" />

		<!-- 付费免费弹框-->
		<showModal ref="showModal" @free="free" @pay="pay" :spotAuth="spotAuth" :spotArGoods_obj="spotArGoods_obj" />
		<!-- 打卡弹框 -->
		<clockModal ref="clockModal" />


		<!-- 地点 海拔信息 -->
		<info :theme="theme" id="info" v-if="map_nav_type_computed == 'ar_nav'" />
		<top_nav :theme="theme" id="top_nav" v-if="map_nav_type_computed == 'map_nav'" />
		<!-- <zero-switch
			v-if="is_dev"
			v-model="mock_open"
			inactive-color="#94ACA6"
			active-color="#0CCA92"
			backgroundColorOff="#E8EDEC"
			backgroundColorOn="#D7F0E8"
			textOff="关"
			textOn="开"
			showText
			:size="24"
			@change="mock_change"
		></zero-switch> -->

		<!-- AI会话 -->
		<ai_chat ref="ai_chat" :spotAuth="spotAuth" @no_spotAuth="no_spotAuth" />

		<!-- 倒计时 -->

				<view
					class="h-56rpx ml-32rpx w-304rpx bg-#fff opacity-90 border-rd-16rpx p-20rpx pt-12rpx pb-12rpx text-#666 text-size-24rpx flex items-center fixed z-22" :style="{ bottom: btnHeight }"
					v-if="spotAuth.experience && spotAuth.experience_end_time_stamp">
					<text class="mr-16rpx">剩余体验时间</text>
					<u-count-down :time="spotAuth.experience_end_time_stamp * 1000" format="HH:mm:ss"
						@finish="finish"></u-count-down>
				</view>
			
			<view class="info_box_right" :style="{ bottom: btnHeight }">
				<view class="ai_button">
					<view class="ai_button_left"
						@tap="navigateTo(`/pagesA/scenic_list/index?id=${scenic_detail.spot_id}`)">
						<image src="@/static/images/map/ai_text.png" mode="widthFix"></image>
					</view>
					<view class="ai_button_center"></view>
					<view class="ai_button_right">
						<zero-switch v-model="switch_value" inactive-color="#94ACA6" active-color="#0CCA92"
							backgroundColorOff="#E8EDEC" backgroundColorOn="#D7F0E8" textOff="AI" textOn="AI" showText
							:size="24" @change="switch_change"></zero-switch>
					</view>
				</view>
			</view>
		
		<!-- 地图导览 -->
		<map_nav :NavHeight_infoHeight="NavHeight_infoHeight" />
		<!-- 导航按钮 -->
		<nav_button @touchend_speak="touchend_speak" @no_spotAuth="no_spotAuth" :spotAuth="spotAuth" />

		<!--景点介绍-->

		<view class="relative z-11"><u-loading-page :loading="loading" bg-color="rgba(0,0,0,0.4)"
				loading-text="购买信息更新中"></u-loading-page></view>
	</view>
</template>

<script>
	import {
		navigateTo,
		navigateBack,
		redirectTo
	} from '@/hooks';
	import custom_navbar from '@/components/custom_navbar/index.vue';
	import showModal from './components/showModal.vue';
	import clockModal from './components/clockModal.vue';
	import firstShow from './components/firstShow.vue';
	import info from './components/info.vue';
	import top_nav from './components/top_nav.vue';
	import map_nav from './components/map_nav.vue';
	import nav_button from './components/nav_button.vue';
	import ai_chat from './components/ai_chat.vue';
	import {
		spotAuth,
		naviExperience,
		spotArGoods,
		arGoodsPlaceOrder,
		orderPay
	} from '@/api/home';
	import {
		payNow,screenWidth, screenHeight, rpxToPx
	} from '@/utils';
	import store from '@/store';

	import scenic from './components/scenic.vue';

	export default {
		components: {
			custom_navbar,
			showModal,
			info,
			map_nav,
			nav_button,
			ai_chat,
			clockModal,
			scenic,
			firstShow,
			top_nav
		},
		data() {
			return {
				is_dev: this.$store.getters.fileDeploy?.maps?.mock_open,
				navigateTo,
				modalShow: true,
				theme: 'dark',
				NavHeight_infoHeight: 0,
				spotAuth: {
					experience_end_time_stamp: 1
				},
				is_pay: true,
				spotArGoods_obj: {},
				scenic_detail: JSON.parse(uni.getStorageSync('scenic_detail')) || {},
				loading: false,
				mock_open: this.$store.getters.mock_open,
				is_read: 0,
				switch_value: false,
				btnHeight:'428rpx',

			};
		},
		onShow() {
			var _this =this;
			// var read = uni.getStorageSync('firstArNav');
			// if (read == 1) {
			// 	_this.is_read = 1;
			// } else {
			// 	_this.is_read = 0;
			// }
			_this.is_read = 1;
			uni.$once("from_scenic_list", (res) => {
				_this.$store.commit('map/set_map_nav_type', 'map_nav');
			})

			uni.$once("from_scenic_list_point", (res) => {
				_this.$store.commit('map/set_map_nav_type', 'map_nav');
				uni.$emit("point_change", res);
			})
			_this.switch_value = _this.switch_value_computed;
			
			uni.$on('scenic_height',function(data){
					console.log('监听到事件来自 scenic_height：', data.description);
					if(data.description == true)
					{
						_this.btnHeight = rpxToPx(570).toFixed(2) + 'px';
					}
			})
			
			uni.$on('ai_showModal',function(data){
					console.log('监听到事件来自 ai_showModal：', data.status);
					if(data.status == true)
					{
						_this.change_showModal(true);
					}
			})
			
		},

		computed: {
			map_nav_type_computed() {
				return this.$store.getters.map_nav_type;
			},
			switch_value_computed() {
				return this.$store.getters.switch_value;
			},
			btnHeight() {
				const map_nav_type = this.$store.getters.map_nav_type;
				let result = rpxToPx(194+60).toFixed(2) + 'px';
				if (map_nav_type != 'map_nav') {
					result = rpxToPx(438+60).toFixed(2) + 'px';
				}
				console.log(result, '======btnHeight=======');
				return result;
			},
		},
		watch: {
			map_nav_type_computed(newValue, oldValue) {				
				if (newValue == oldValue) return;
				this.observer_map_nav(newValue);
				
				if (newValue == 'map_nav') {	
					
					var read = uni.getStorageSync('firstArNav');
					if (read == 1) {
						
						this.is_read = 1;
					} else {
						
						this.is_read = 0;
					}
					this.switch_value = false;
				} else {
					this.switch_value = true;
				}
				this.$store.commit('map/set_switch_value', this.switch_value);
			},
		
		},
		beforeDestroy() {
			store.commit('userInfo/set_audio_show', true);
		},
		onUnload() {
			store.commit('userInfo/set_is_login_popup', false);
		},
		created() {},
		async mounted() {
			
			//景点打卡过来切换map_nav	
			
			if (this.scenic_detail.from == 'punch') {
				this.btnHeight = '540rpx';
				this.$store.commit('map/set_map_nav_type', 'map_nav');
			}
			await this.spotArGoods_fn();
			this.spotAuth_fn();
			this.getinfoHeight();
		},
		methods: {
			mock_change(value) {
				this.$store.commit('map/set_mock_open', value);
			},
			// 获取头的高度
			getNavHeight(e) {
				this.NavHeight_infoHeight += e;
			},
			getinfoHeight(e) {
				let view = uni.createSelectorQuery().in(this).select('#info');
				view
					.boundingClientRect((data) => {
						console.log('得到布局位置信息' + JSON.stringify(data.height));
						this.NavHeight_infoHeight += data.height;
					})
					.exec();
			},
			//商品价格
			async spotArGoods_fn() {
				let result = await spotArGoods({
					spot_id: this.scenic_detail.spot_id
				});
				this.spotArGoods_obj = result.data;
			},

			//判断权限体验
			async spotAuth_fn() {
				//用户商品权限
				let {
					data
				} = await spotAuth({
					spot_id: this.scenic_detail.spot_id
				});
				this.spotAuth = data;
				//购买时间到期&& 没发起体验 || 没体验时间
				if (!this.spotAuth.purchase_status && (!this.spotAuth.experience || this.spotAuth
						.experience_end_time_stamp == 0)) {
					return this.change_showModal(true);
				}
			},
			// 是否开启付费弹窗
			change_showModal(value) {
				let {
					showModal
				} = this.$refs;
				value ? showModal.open() : showModal.close();
			},
			// 弹窗免费按钮
			async free() {
				console.log('免费');
				let {
					data
				} = await naviExperience({
					spot_id: this.scenic_detail.spot_id
				});
				this.spotAuth.experience_end_time_stamp = data.experience_end_time_stamp;
				this.change_showModal(false);
				redirectTo('/pagesA/ar_navigation/index');
			},
			// 弹窗购买按钮
			async pay() {
				if (!this.is_pay) return;
				let result = await arGoodsPlaceOrder({
					spot_id: this.scenic_detail.spot_id
				});
				let {
					data
				} = await orderPay({
					pay_trade_no: result.data.trade_no
				});
				payNow(data, () => {
					this.is_pay = true;
					this.change_showModal(false);
					this.loading = true;
					setTimeout(() => {
						redirectTo('/pagesA/ar_navigation/index');
					}, 2000);
				});
			},
			// 倒计时结束
			finish() {
				console.log('倒计时结束');
				this.spotAuth.experience_end_time_stamp = 0;
				this.change_showModal(true);
			},

			// 松开说话
			touchend_speak(obj) {
				console.log('[松开说话 touchend_speak ] >', obj);
				if (!obj.data) return;
				this.$refs.ai_chat.message(obj);
			},
			//按钮没权限
			no_spotAuth() {
				this.change_showModal(true);
			},
			//悬浮导航点击 AR导航 地图导航
			observer_map_nav() {
				console.log(` ${this.map_nav_type_computed}  ${this.map_nav_type_computed == 'ar_nav' ? 'AR导航' : '地图导航'}`);
				this.theme = this.map_nav_type_computed == 'ar_nav' ? 'dark' : 'light';
			},
			//开关
			switch_change(value) {
				console.log('AI开关', value);
				this.switch_value = value;
				this.$store.commit('map/set_switch_value', value);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		background: url('https://resources.ym2meta.com/web-smart-tour/ar_bg.png') no-repeat;
		background-size: 100% 100%;

		::v-deep .u-count-down__text {
			color: red !important;
		}
	}



	.info_box_left {
		width: 340rpx;
		pointer-events: none; 
	}

	.info_box_right {
		width: auto;
		display: flex;
		position: fixed;
		z-index: 22;
		right: 40rpx;
	}

	.ai_button {
		width: auto;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		display: flex;
		margin: 10rpx auto;
	}

	.ai_button_left {
		width: 48rpx;
		height: auto;
	}

	.ai_button_left image {
		margin-top: 6rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.ai_button_center {
		margin:14rpx 10rpx 0rpx 10rpx;
		width: 0rpx;
		height: 24rpx;
		border: 1rpx solid #E8EDEC;
	}

	.ai_button_right {
		width: auto;
		padding-top: 2rpx;
	}
</style>